<template>
  <el-container class="recipes-container">
    <el-main class="recipes-main">
      <!-- 页面标题 -->
      <el-row class="header-section">
        <el-col :span="24">
          <el-text class="page-title" size="large" tag="strong">家庭美食食谱</el-text>
        </el-col>
      </el-row>

      <!-- 食物转盘选择器 -->
      <el-row class="selector-section">
        <el-col :span="24">
          <el-card class="selector-card" shadow="never">
            <template #header>
              <el-row justify="space-between" align="middle">
                <el-col>
                  <el-text size="small" tag="strong">今日推荐</el-text>
                </el-col>
                <el-col>
                  <el-button 
                    type="primary" 
                    size="small" 
                    @click="startSpin"
                    :disabled="isSpinning"
                  >
                    {{ isSpinning ? '抽取中...' : '随机抽取' }}
                  </el-button>
                </el-col>
              </el-row>
            </template>
            <el-row justify="center">
              <el-col :span="24" class="wheel-col">
                <div class="wheel-container">
                  <div 
                    class="wheel" 
                    :style="{ transform: `rotate(${wheelRotation}deg)` }"
                    ref="wheelRef"
                  >
                    <div 
                      v-for="(recipe, index) in displayedRecipes" 
                      :key="index"
                      class="wheel-item"
                      :style="getItemStyle(index)"
                    >
                      <el-tooltip 
                        :content="recipe.name" 
                        placement="top"
                      >
                        <div class="item-content">
                          <el-image 
                            :src="recipe.image"
                            class="item-image"
                            fit="cover"
                          />
                        </div>
                      </el-tooltip>
                    </div>
                  </div>
                  <div class="wheel-pointer"></div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <!-- 推荐食谱详情 -->
      <el-row class="recommend-section" v-if="selectedRecipe">
        <el-col :span="24">
          <el-card class="recommend-card" shadow="hover">
            <el-row :gutter="20">
              <el-col :span="24" :md="8">
                <el-image 
                  :src="selectedRecipe.image"
                  class="recommend-image"
                  fit="cover"
                />
              </el-col>
              <el-col :span="24" :md="16">
                <el-text class="recommend-title" size="large" tag="strong">
                  {{ selectedRecipe.name }}
                </el-text>
                <el-text class="recommend-desc" size="small" type="secondary">
                  {{ selectedRecipe.description }}
                </el-text>
                <el-row :gutter="10" class="recommend-info">
                  <el-col :span="12">
                    <el-text size="small">
                      <el-icon :size="14"><Timer /></el-icon>
                      制作时间: {{ selectedRecipe.cookTime }}
                    </el-text>
                  </el-col>
                  <el-col :span="12">
                    <el-text size="small">
                      难度: 
                      <el-rate
                        :model-value="selectedRecipe.difficulty"
                        :max="3"
                        size="small"
                        disabled
                      />
                    </el-text>
                  </el-col>
                </el-row>
                <el-row class="recommend-tags">
                  <el-col :span="24">
                    <el-space :size="6" wrap>
                      <el-tag 
                        v-for="tag in selectedRecipe.tags" 
                        :key="tag"
                        type="success"
                        size="small"
                      >
                        {{ tag }}
                      </el-tag>
                    </el-space>
                  </el-col>
                </el-row>
                <el-row class="recommend-actions">
                  <el-col :span="24">
                    <el-button type="primary" @click="viewRecipeDetail(selectedRecipe.id)">
                      查看详细做法
                    </el-button>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <!-- 所有食谱列表 -->
      <el-row class="section-title">
        <el-col :span="24">
          <el-text size="medium" tag="strong">全部家常菜</el-text>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="recipes-grid">
        <el-col 
          v-for="recipe in recipesData" 
          :key="recipe.id"
          :span="24" 
          :md="8" 
          :lg="6"
          class="recipe-col"
        >
          <el-card class="recipe-card" shadow="hover" @click="selectRecipe(recipe)">
            <el-row class="card-content">
              <el-col :span="24" class="cover-col">
                <el-image 
                  :src="recipe.image"
                  class="recipe-cover"
                  fit="cover"
                />
              </el-col>
              <el-col :span="24" class="title-col">
                <el-text class="recipe-name" size="small" tag="strong">{{ recipe.name }}</el-text>
              </el-col>
              <el-col :span="24" class="time-col">
                <el-text size="mini" type="info">
                  <el-icon :size="12"><Timer /></el-icon>
                  {{ recipe.cookTime }}
                </el-text>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { Timer } from '@element-plus/icons-vue'
import { RecipeApi, RecipeInfo, RecipeQuery } from '@/api/family/recipe'

// 转盘相关数据
const wheelRotation = ref(0)
const isSpinning = ref(false)
const selectedRecipe = ref<any>(null)
const wheelRef = ref<HTMLElement | null>(null)
  

// 食谱数据
const recipesData = ref<Array<any>>([])

// 显示在转盘上的食谱（取前8个）
const displayedRecipes = computed(() => {
  return recipesData.value.slice(0, 8)
})

// 数据状态
const loading = ref(false)
// 查询表单
const queryForm = reactive<RecipeQuery>({
  page: 1,
  pageSize: 10,
  name: '',
  type: '',
  difficulty: undefined
})


// 获取食谱数据的函数
const fetchRecipesData = async () => {
  try {
    loading.value = true
    const response = await RecipeApi.UserGetRecipeList(queryForm)
    // 这里替换为实际的后端API调用
    // const response = await fetch('/api/recipes')
    // const data = await response.json()
    
    // 模拟数据
    // const mockData = [
    //   {
    //     id: 1,
    //     name: '番茄炒蛋',
    //     description: '家常经典菜，酸甜开胃，营养丰富',
    //     cookTime: '15分钟',
    //     difficulty: 1,
    //     tags: ['家常菜', '简单', '下饭菜'],
    //     image: 'https://picsum.photos/300/200?random=1'
    //   }
    // ]
    
    recipesData.value = response.data || []
    // 默认选中第一个食谱
    if (mockData.length > 0) {
      selectedRecipe.value = mockData[0]
    }
  } catch (error) {
    console.error('获取食谱数据失败:', error)
  }
}

// 计算转盘项目样式
const getItemStyle = (index: number) => {
  const angle = (360 / displayedRecipes.value.length) * index
  return {
    transform: `rotate(${angle}deg) translate(120px) rotate(-${angle}deg)`
  }
}

// 开始转盘旋转
const startSpin = () => {
  if (isSpinning.value || displayedRecipes.value.length === 0) return
  
  isSpinning.value = true
  
  // 随机选择一个食谱
  const randomIndex = Math.floor(Math.random() * displayedRecipes.value.length)
  const selected = displayedRecipes.value[randomIndex]
  
  // 计算旋转角度（多转几圈确保随机性）
  const extraRotations = 5 // 额外转5圈
  const sectorAngle = 360 / displayedRecipes.value.length
  const targetAngle = extraRotations * 360 + (360 - randomIndex * sectorAngle - sectorAngle / 2)
  
  wheelRotation.value = targetAngle
  
  // 动画结束后设置选中食谱
  setTimeout(() => {
    selectedRecipe.value = selected
    isSpinning.value = false
  }, 3000)
}

// 选择食谱
const selectRecipe = (recipe: any) => {
  selectedRecipe.value = recipe
}

// 查看食谱详情
const viewRecipeDetail = (id: number) => {
  console.log('查看食谱详情:', id)
  // 这里可以跳转到详情页面
}

// 组件挂载时获取数据
onMounted(() => {
  fetchRecipesData()
})
</script>

<style scoped>
.recipes-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.recipes-main {
  padding: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.header-section {
  margin-bottom: 30px;
}

.page-title {
  font-size: 28px;
  color: #303133;
  display: block;
  text-align: center;
}

.selector-section {
  margin-bottom: 30px;
}

.selector-card {
  border: 1px solid #e4e7ed;
}

.selector-card ::v-deep .el-card__header {
  padding: 15px 20px;
  background-color: #fafafa;
}

.wheel-col {
  padding: 30px 0;
  text-align: center;
}

.wheel-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  transition: transform 3s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: conic-gradient(
    from 0deg,
    #409EFF, #67C23A, #E6A23C, #F56C6C,
    #909399, #409EFF, #67C23A, #E6A23C
  );
}

.wheel-item {
  position: absolute;
  top: 0;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  transform-origin: 30px 150px;
}

.item-content {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.item-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.wheel-pointer {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background: #F56C6C;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  z-index: 10;
}

.recommend-section {
  margin-bottom: 30px;
}

.recommend-card {
  border: 1px solid #e4e7ed;
}

.recommend-image {
  width: 100%;
  height: 200px;
  border-radius: 8px;
}

.recommend-title {
  display: block;
  font-size: 24px;
  margin-bottom: 10px;
  color: #303133;
}

.recommend-desc {
  display: block;
  margin-bottom: 20px;
  line-height: 1.6;
}

.recommend-info {
  margin-bottom: 20px;
}

.recommend-tags {
  margin-bottom: 20px;
}

.recommend-actions {
  margin-top: 20px;
}

.section-title {
  margin: 30px 0 20px 0;
}

.recipes-grid {
  margin: 0 -10px;
}

.recipe-col {
  padding: 0 10px;
  margin-bottom: 20px;
}

.recipe-card {
  height: 100%;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  cursor: pointer;
  transition: all 0.3s;
}

.recipe-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-content {
  padding: 15px;
}

.cover-col {
  margin-bottom: 10px;
}

.recipe-cover {
  width: 100%;
  height: 120px;
  border-radius: 4px;
}

.title-col {
  margin-bottom: 5px;
}

.recipe-name {
  display: block;
  font-size: 14px;
  color: #303133;
  text-align: center;
}

.time-col {
  text-align: center;
}

:deep(.el-card__body) {
  padding: 0;
}

@media (max-width: 768px) {
  .recipes-main {
    padding: 20px 15px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .wheel-container {
    width: 250px;
    height: 250px;
  }
  
  .wheel {
    transform-origin: 125px 125px;
  }
  
  .wheel-item {
    transform-origin: 30px 125px;
  }
  
  .recipe-col {
    margin-bottom: 15px;
  }
  
  .recommend-image {
    height: 150px;
  }
}
</style>